<template>
    <div class="home">
        <homeheader></homeheader>
        <div class="search_wrap">
            <div class="shop_search" @click="$router.history.push('/search')">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hongdenglong"></use>
                </svg>
                搜索饿了么商家 商品名称
            </div>
        </div>

        <!--轮播图-->

        <div id="container">
            <mt-swipe class="entries" :auto="4000">
                <mt-swipe-item v-for="(item,index) in shopTypeList" :key="index" class="entry_wrap">
                    <div class="entry_wrap" v-for="info in item" :key="info._id" @click="$router.history.push('/shopList/'+info._id)">
                        <div class="foodentry">
                            <div class="img_wrap">
                                <img :src="'/api'+info.shopTypePic">
                            </div>
                            <span>{{info.shopTypeName}}</span>
                        </div>
                    </div>


                </mt-swipe-item>

            </mt-swipe>
            <!-- 分类 -->




        </div>

        <!-- 推荐商家 -->
        <div class="shoplist-title">推荐商家</div>
        <div class="hah" style=" touch-action: none;">
            <mt-loadmore :top-method="loadTop"  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">

                <section class="index-container" v-for="item in shopList" :key="item._id">
                    <div class="index-shopInfo">
                        <!-- 左侧图片 -->
                        <div class="logo_container">
                            <img :src="'/api/'+item.shopPic">
                        </div>
                        <!-- 右侧内容 -->
                        <div class="index_main">
                            <!-- 第一行 品牌 -->
                            <div class="index_shopname">
                                <i>品牌</i>
                                <span>{{item.shopName}}</span>
                            </div>

                            <!-- 第二行 星级 -->
                            <div class="index-rateWrap">
                                <div>
                                    <span>月售12单</span>
                                </div>
                                <div class="delivery">
                                    <span class="icon-hollow">蜂鸟专送</span>
                                </div>
                            </div>

                            <!-- 第三行 配送 -->
                            <div class="index-moneylimit">
                                <div>
                                    <span>¥20起送</span>
                                    |
                                    <span>配送费¥5</span>
                                </div>
                                <div class="index-distanceWrap">
                                    <span>1.5km</span>
                                    |
                                    <span>10分钟</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </mt-loadmore>

        </div>
    </div>
</template>

<script>
    import "@/assets/iconfont/iconfont.js"
    import homeheader from "@/components/HomeHeader"
    import { Swipe, SwipeItem } from 'mint-ui';
    import { Indicator } from 'mint-ui';
    export default {
        name: "Index",
        components:{
            homeheader
        },
        data(){
          return{
              shopTypeList:[],
              shopList:[],
              allLoaded:false,
              pageIndex:1
          }
        },
        async mounted() {
          const {shopTypeList}=await this.$axios.get("/shopTypeList")
            this.shopTypeList=shopTypeList
        },
        created(){
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });
            setInterval(()=>{
                Indicator.close();
            },3000)
        },
        methods:{
            loadTop(){

                this.$axios.get("shopList")
                    .then(data=>{
                        this.shopList = data.shopList;
                        this.$refs.loadmore.onTopLoaded();
                    })

            },
            async loadBottom(){

                const {shopList,pageSum} = await this.$axios.get("shopList",{
                    params:{
                        pageIndex:this.pageIndex
                    }
                });
                this.shopList = [...this.shopList,...shopList];
                if(this.pageIndex===pageSum){
                    this.allLoaded = true;
                }else{
                    this.pageIndex++;
                }
                this.$refs.loadmore.onBottomLoaded();
            }
        },

    }
</script>

<style scoped>

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    /****************首页*******************************************/
    .home {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }

    .header,
    .search_wrap {
        background-color: #009eef;
        padding: 10px 16px;
    }



    .search_wrap .shop_search {
        /* margin-top: 10px; */
        background-color: #fff;
        padding: 10px 0;
        border-radius: 4px;
        text-align: center;
        color: #aaa;
    }

    .search_wrap {
        position: sticky;
        top: 0px;
        z-index: 999;
        box-sizing: border-box;
    }

    .fixedview {
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 999;
    }

    /****************swiper************************************************/
    .entries {
        background: #fff;
        height: 47.2vw;
        text-align: center;
        overflow: hidden;
    }

    .foodentry {
        width: 20%;
        float: left;
        position: relative;
        margin-top: 2.933333vw;
    }

    .foodentry .img_wrap {
        position: relative;
        display: inline-block;
        width: 12vw;
        height: 12vw;
    }

    .img_wrap img {
        width: 100%;
        height: 100%;
    }

    .foodentry span {
        display: block;
        color: #666;
        font-size: 0.32rem;
    }

    /* 推荐商家 */
    .shoplist-title {
        display: flex;
        align-items: flex;
        justify-content: center;
        height: 9.6vw;
        line-height: 9.6vw;
        font-size: 16px;
        color: #333;
        background: #fff;
    }

    .shoplist-title:after,
    .shoplist-title:before {
        display: block;
        content: "一";
        width: 5.333333vw;
        height: 0.266667vw;
        color: #999;
    }

    .shoplist-title:before {
        margin-right: 3.466667vw;
    }

    .shoplist-title:after {
        margin-left: 3.466667vw;
    }

    .fixedview {
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 999;
    }

    /* 商家列表 */
    .index-container {
        background: #fff;
        color: #666;
        padding: 4vw 0;
        border-bottom: 0.133333vw solid #eee;
    }

    .index-shopInfo {
        display: flex;
        justify-content: flex-start;
        padding: 0 2.666667vw;
        align-items: stretch;
    }

    .logo_container {
        width: 17.333333vw;
        height: 17.333333vw;
    }

    .logo_container img {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 0.133333vw solid rgba(0, 0, 0, 0.08);
        border-radius: 0.533333vw;
    }

    .index_main {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        flex-direction: column;
        padding-left: 2.666667vw;
        font-size: 0.2rem;
        flex-grow: 1;
    }

    .index_shopname {
        align-items: center;
        color: #333;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .index_shopname i {
        background: #ffe800;
        margin-right: 1.333333vw;
        padding: 0.266667vw 0.666667vw;
        text-align: center;
        white-space: nowrap;
        font-size: 0.6rem;
    }

    .index_shopname span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .index-rateWrap {
        display: flex;
        align-items: center;
        overflow: hidden;
        justify-content: space-between;
    }

    .index-rateWrap .rate {
        margin-right: 1.066667vw;
    }

    .index-moneylimit {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .index-moneylimit .index-distanceWrap {
        color: #999;
    }

    .delivery {
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        margin-left: 1.066667vw;
    }

    .delivery .icon-hollow {
        color: #fff;
        background-color: #2395ff;
        padding: 2px;
        box-sizing: border-box;
    }
</style>